Skip to content

fix(frontend): improve mobile layout responsiveness and fix JS page l… - #1653

Open
navyasastry06 wants to merge 4 commits into
imDarshanGK:mainfrom
navyasastry06:feat/mobile-layout-enhancement
Open

fix(frontend): improve mobile layout responsiveness and fix JS page l…#1653
navyasastry06 wants to merge 4 commits into
imDarshanGK:mainfrom
navyasastry06:feat/mobile-layout-enhancement

Conversation

@navyasastry06

Copy link
Copy Markdown
Contributor

Description

This PR resolves responsiveness issues on mobile/tablet viewports and fixes a startup JavaScript crash on the frontend:

  1. Workspace Grid & Page Overflow Fix: Relocated the #workspace > .panel CSS override to the max-width: 900px media query. This prevents the browser from generating an implicit second column on tablet viewports (widths between 600px and 900px) which stretched the page horizontally and caused scrollbars.
  2. Sticky Navigation Bar Layout: Stacked and centered the navigation logo and links on screens under 600px for a clean app-like appearance. Adjusted margins/paddings under 400px to match layout boundaries.
  3. Centered Footer Columns: Extracted inline style tags to a new CSS rule .footer-inner, centering and stacking layout columns vertically under @media (max-width: 600px).
  4. Legible Newsletter Subscription Box: Fixed CSS custom property typos (--fg to --text and --muted to --text3) in the email newsletter form so that input text is fully readable on both dark and light themes.
  5. Page Load JavaScript Crash Fix: Removed a call to the undefined function loadTheme() in index.html which caused a ReferenceError on startup and blocked further script initialization (history/favorites/analytics rendering).

Related Issue

Fixes #1595

Type of change

  • Bug fix
  • New feature / enhancement
  • Documentation update
  • Test addition
  • Refactor

Checklist

  • I have read CONTRIBUTING.md
  • My branch is up to date with main
  • I have run pytest -v and all tests pass
  • I have not introduced duplicate issues or features
  • My PR title follows the format: feat/fix/docs/test: short description
  • I have added tests for new features (Level 2 and 3 issues)
  • No hardcoded secrets or API keys in my code
  • This PR is linked to a GSSoC 2026 issue

Screenshots

Please check the following absolute files on your local machine if you'd like to copy or reference these visual validation screenshots:
Before:
image

After:
image

Test evidence

All frontend static and playwright E2E tests pass successfully:

> node tests/sample-comments.test.js && node tests/shortcut-ui.test.js
(Static tests pass successfully)

> playwright test
Running 3 tests using 2 workers
  ok 1 tests\e2e\analyze.spec.js:4:1 › uploads a sample file and renders analysis results (3.4s)
  ok 2 tests\e2e\history-pagination.spec.js:3:1 › shows pagination controls and allows navigating history pages (4.1s)
  ok 3 tests\e2e\analyze.spec.js:23:1 › drag-and-drop upload auto-selects the detected language tab (2.0s)
  3 passed (7.7s)

@imDarshanGK imDarshanGK left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@navyasastry06 fix this one

Image

@navyasastry06

Copy link
Copy Markdown
Contributor Author

@imDarshanGK all checks have passed pls check
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve mobile layout in frontend styles

2 participants